<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>燕云长风</title>
    
    <style>
        .container-xl{
            background-color: aquamarine;
        }
        body{
            margin: 0;
            height: 5000px;
        }
        div.center-middle{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
       }
       div.container-table{
           width:300px;
       }
       div.table-body{
         max-height:150px ;
         overflow-y: scroll;
       }
       div.relative{
           position: relative;
       }
    </style>
</head>
<body>
    <p>明月出天山</p>
    <p>苍茫云海间</p>
    <p>长风几万里</p>
    <p>吹度玉门关</p>
    <div class="center-middle">燕云长风</div>
    <div class="relative">
        <div>dsadsads</div>
    </div>
  
    <div class="container-xl">
       <div class="row">
           <div class="col-sm-4">菜单</div>
           <div class="col-sm-8">内容</div>
       </div>
    </div>

    <ul id="ul">
        <li>+</li>
        <li>-</li>
        <li>*</li>
        <li>/</li>
    </ul>
    <canvas id="c" width="600" height="400" draggable="true"></canvas>

    <div class="container-table">
        <div class="table-header">
             <table>
                 <thead>
                     <tr>
                         <th>燕云长风</th>
                         <th>燕云长风</th>
                         <th>燕云长风</th>
                         <th>燕云长风</th>
                     </tr>
                 </thead>
             </table>
        </div>
        <div class="table-body">
             <table>
                 <tbody>
                     <tr>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                     </tr>
                     <tr>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                     </tr>
                     <tr>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                     </tr>
                     <tr>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                     </tr>
                     <tr>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                     </tr>
                     <tr>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                     </tr>
                     <tr>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                         <td>燕云长风</td>
                     </tr>
                 </tbody>
             </table>
        </div>
    </div>

    <table>
            <thead>
                    <tr>
                        <th>燕云长风</th>
                        <th>燕云长风</th>
                        <th>燕云长风</th>
                        <th>燕云长风</th>
                    </tr>
                </thead>
                <tbody style="max-height: 10px;overflow-y:scroll">
                        <tr>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                        </tr>
                        <tr>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                        </tr>
                        <tr>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                        </tr>
                        <tr>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                        </tr>
                        <tr>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                        </tr>
                        <tr>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                        </tr>
                        <tr>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                            <td>燕云长风</td>
                        </tr>
                    </tbody>
    </table>
</body>
<script>
    ctx = c.getContext('2d');
    ctx.fillRect(0,0,100,80)
    document.addEventListener('mousemove',()=>{
        // console.log('mousemove')
    })
    document.addEventListener('mousedown',()=>{
        // console.log('mousedown')
    })
    document.addEventListener('click',(e)=>{
        // console.log(e.clientX)
        // console.log(e.clientY)
        // console.log('click')
        // console.log(e.pageY)
    })
    const row = document.querySelector('.row');
    row.addEventListener('click', e=>{
        // console.log(e.offsetX,e.offsetY)
    })
    // console.log(row)
    // console.log(screen.height)
    // console.log(screen.availHeight)
    // console.log(screen.availHeight)
   ul.addEventListener('click',e => {
       
       console.log(e.target)
       console.log(e)
       console.log(e.currentTarget)
   })
</script>

</html>